<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表 重写2</title>
        <!-- <link href="./CSS-2.css" rel="stylesheet" /> -->
        <style>
			/* table样式 */
			table {
				/* 外边距 */
				margin: auto;
				/* 边框 */
                border: 0px;
                /* 字体 */
                font-family: STFangsong;
                font-weight: 600;
                color: #000000;
                /* 背景 */
                background-color: lightsalmon;
                /* 字居中 */
                text-align: center;
                /* 宽度*/
                width: 800px;
            }

			table th {
				/* 字体 */
				font-family: STHeiti
			}

			table th,
			table td {
				/* 边框 */
				border: 1px solid #D3D3D3;
			}

			/* 隔行换色 偶数行 */
			.tableClass1 tr:nth-child(even) {
				/* 背景 */
				background-color: lightcoral;
				/* background-color: rgba(200,160,10,0.5); */
			}

			/* 鼠标悬停行换色 */
			.tableClass1 tr:hover {
				/* 背景 */
				background-color: #FF7F50;
			}

			/* "更新"div的样式 */
			.hideDiv {
				/* 内边距 为了垂直位置更居中 */
				padding: 10%;
				/* 外边距 为了居中 */
				/* margin: auto; */
				/* 四个属性都为0 为了覆盖浏览器页面 */
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				/* 背景色 以及透明度 透明度为1是不透明 */
				background-color: rgba(200, 200, 200, 0.5);
				/* 相对浏览器 为了覆盖整个页面 */
				position: fixed;
				/* 显示处于页面最上层 */
				z-index: 999;
			}

			/* 按钮 */
			button {
                /* 暂定样式书写顺序:内边距 边框 外边距 背景 字体 其他 */
                border-radius: 3px;
                border: 0px;
                /* 背景 */
                background-color: palegreen;
                /* background-color: #1e90ff; */
                /* 字体 */
                /* color: #D3D3D3; */
                color: dimgrey;
                font-size: 16px;
                font-family: YouYuan;
                font-weight: 600;
                /* 鼠标悬浮显示 手 图标 */
                cursor: pointer;
            }

            button.cancle {
                background-color: darkgray;
                color: #D3D3D3;
            }

            button.add {
                background-color: mediumseagreen;
                color: #D3D3D3;
            }

            button.del {
                background-color: #696969;
                color: #D3D3D3;
            }

            button.update {
                background-color: #DDA0DD;
            }


            /* input样式 */
            input[type=text] {
                /* 边框 */
                border: 0px;
                border-radius: 3px;
                /* 左外边距 */
                margin-left: 5px;
                /* 字体 */
                font-size: 15px;
				font-family: STLiti;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 更新 -->
			<div class="hideDiv" :style="styleHideDiv">
				<table class="tableClass1">
					<tr>
						<th colspan="6">更新表</th>
					</tr>
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th colspan="2">操作</th>
					</tr>
					<!-- 更新 -->
                    <tr>
                        <td v-text="userUpdate.id"></td>
                        <td><input type="text" v-model="userUpdate.name" placeholder="请输入姓名..."/></td>
                        <td><input type="text" v-model="userUpdate.age" placeholder="请输入年龄..."/></td>
                        <td><input type="text" v-model="userUpdate.sex" placeholder="请输入性别..."/></td>
                        <td>
                            <button @click="confirmUpdate()" class="update">更新</button>
                        </td>
                        <td>
                            <button @click="hideDiv()" class="cancle">取消</button>
                        </td>
                    </tr>
				</table>
			</div>
			<!-- 显示数据 -->
			<div>
				<table>
					<tr>
						<th colspan="6">
							<h1>用户列表</h1>
						</th>
					</tr>
					<!-- 添加 -->
                    <tr>

                        <td>编号:</td>
                        <td>姓名:<input type="text" v-model="userAdd.name" placeholder="请输入姓名..."/></td>
                        <td>年龄:<input type="text" v-model="userAdd.age" placeholder="请输入年龄..."/></td>
                        <td>性别:<input type="text" v-model="userAdd.sex" placeholder="请输入性别..."/></td>
                        <td>
                            <button @click="confirmAdd()" class="add">添加</button>
                        </td>
                        <td>
                            <button @click="clearUser(userAdd)" class="cancle">清空</button>
                        </td>
                    </tr>
					<!-- 翻页 -->
					<tr>
						<td colspan="3">

						</td>
						<td>
							每页条数:<input type="text" v-model.number.lazy="rowsPerPage" />
						</td>
						<td>
							<button @click="prePage()">上一页</button>
						</td>
						<td>
							<button @click="nextPage()">下一页</button>
						</td>
					</tr>
				</table>
				<table class="tableClass1">
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th colspan="2">操作</th>
					</tr>
                    <tr v-for="(user1,index) in userList" v-if="index>=userIndex&&index<userIndex+rowsPerPage"
                        :key="index">
                        <td v-text="user1.id"></td>
                        <td v-text="user1.name"></td>
                        <td v-text="user1.age"></td>
                        <td v-text="user1.sex"></td>
                        <td>
                            <button @click="showDiv(user1)" class="update">修改</button>
                        </td>
                        <td>
                            <button @click="confirmDelete(user1.id)" class="del">删除</button>
                        </td>
                    </tr>
				</table>
			</div>
		</div>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
            /* restFul风格 url都是/VueAxios/user/参数 */
            /* 公共url前缀 */
            axios.defaults.baseURL = `http://127.0.0.1:8090`
            const APP = new Vue({
                //不要忘记# .等符号
                el: '#app',
                data: {
                    url: `/VueAxios/user`,
                    userUpdate: {
                        id: '',
                        name: '',
                        age: '',
                        sex: ''
                    },
                    userAdd: {
                        id: '',
                        name: '',
                        age: '',
                        sex: ''
                    },
                    /* 空user */
                    emptyUser: {
                        id: '',
                        name: '',
                        age: '',
						sex: ''
					},
					userList: [],
					/* 每页条数 */
					rowsPerPage: 5,
					/* 当前页的第一条数据的索引 */
					userIndex: 0,
					/* 绑定样式 */
					styleHideDiv: {
						display: 'none'
					}
				},
				methods: {
					/* 业务 */
					async getUserList() {
						let {
							data: list
						} = await axios.get(`${this.url}`)
						this.userList = list
					},
					async add() {
                        let name = this.userAdd.name
                        let age = this.userAdd.age
                        let sex = this.userAdd.sex
                        await axios.post(`${this.url}/${name}/${age}/${sex}`)
                        this.getUserList()
                    },
					async update() {
                        let id = this.userUpdate.id
                        let name = this.userUpdate.name
                        let age = this.userUpdate.age
                        let sex = this.userUpdate.sex
                        await axios.put(`${this.url}/${id}/${name}/${age}/${sex}`)
                        this.getUserList()
                    },
                    async delete(id) {
                        await axios.delete(`${this.url}/${id}`)
                        this.getUserList()
                    },
                    /* 为空判断 */
                    userIsEmpty(user) {
                        if (user.name == '' || user.age == '' || user.sex == '') {
                            alert("请不要输入空值!请重新输入!")
                            return 1
                        } else {
                            return 0
                        }
                    },
                    /* 确认操作 */
                    confirmPanel(confirmWord) {
                        return confirm(`确认${confirmWord}??`)
                    },
                    confirmAdd() {
                        if (!this.userIsEmpty(this.userAdd)) {
                            if (this.confirmPanel(`添加`)) {
                                this.add()
                            }
                        }
                    },
					confirmUpdate() {
                        if (!this.userIsEmpty(this.userUpdate)) {
                            if (this.confirmPanel(`更新`)) {
                                this.update()
                            }
                        }
                    },
                    confirmDelete(id) {
                        if (this.confirmPanel(`删除`)) {
                            this.delete(id)
                        }
                    },
                    /* 隐藏 显示 */
                    shallowCopy(user1, user) { //浅拷贝
                        user.id = user1.id
                        user.name = user1.name
                        user.age = user1.age
                        user.sex = user1.sex
                    },
                    hideDiv() {
                        this.styleHideDiv.display = 'none'
                        this.shallowCopy(this.emptyUser, this.userUpdate)
                    },
                    showDiv(user) {
                        this.shallowCopy(user, this.userUpdate)
                        this.styleHideDiv.display = 'block'
                    },
                    /* 翻页 */
					prePage() {
						if (this.userIndex >= this.rowsPerPage) {
							this.userIndex -= this.rowsPerPage
						} else {
							this.userIndex = 0
						}
					},
					nextPage() {
						if (this.userIndex < this.userList.length - this.rowsPerPage) {
							this.userIndex += this.rowsPerPage
						}
					}
				},
				mounted() {
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
